<div class="row" id="main" style="width:100%;height:400px;display: none">
</div>
<hr>
<div id="app">
    <!--    <div v-if="show" style="height: 100px;width: 100px;background: #0b4d3f;margin-bottom: 35px;"></div>-->
    <!--    <div v-else style="height: 100px;width: 100px;background: #8E44AD;margin-bottom: 35px;"></div>-->
    <h1>Vue学习</h1>
    <div v-show="show" style="height: 60px;width: 100px;background: #8E44AD;margin-bottom: 5px;"></div>
    <button class="btn btn-info" @click="submit(333,$event)">{{text}}</button>
    <br><br>
    <div class="text-primary display-4"><strong>循环数组</strong></div>
    <ul class="">
        <li v-for="(item, index) in arr">{{item}}---{{index+1}}</li>
    </ul>
    <div class="text-primary display-4"><strong>循环对象</strong></div>
    <li v-for="(value, key) in dataObj" :key="value.id">{{value}}---{{key}}</li>

    <input type="text" v-model="value">
    {{value}}
    <div class="text-primary display-4"><strong>全局组件使用</strong></div>
    <show-html></show-html>
    <show-html></show-html>
    <div class="text-primary display-4"><strong>局部组件使用</strong></div>
    <!--    <my-content :title="title" :content="content"></my-content>-->
    <!--    多个属性，用v-bind传值-->
    <my-content v-bind="childrenInfo" @change="changeDobb"></my-content>
    父组件num1：{{childrenInfo.num1}}
    <div class="text-primary display-4"><strong>小功能实现暨ref的使用</strong></div>
    <change-backgrount></change-backgrount>
</div>

<script>
    //vue学习
    Vue.component('showHtml', {
        data() {
            return {
                msg: 'jump1999'
            }
        },
        template: `<div><button @click="btn">点击</button><span>{{msg}}</span></div>`,
        methods: {
            btn() {
                this.msg = 'jim036'
            }
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {
            text: '显示',
            num: 0,
            show: true,
            arr: ['PHP', 'JAVA'],
            dataObj: [
                {id: 0, name: '张大海', age: '30', address: '西安'},
                {id: 1, name: '冯婉俊', age: '30', address: '西安'}
            ],
            value: 'admin',
            childrenInfo: {
                title: '热泪祝贺中华人民共和国成立70周年',
                content: '2019年是新中国成立70周年之际。弹指之间，新中国迎来了70岁生辰，在这之间发生了翻天覆地的变化。',
                num1: 0
            }
        },
        methods: {
            submit(id, e) {
                console.log(this.$refs);
                //this.num += 1;
                //console.log(id);
                //console.log(e.target)
                this.show = !this.show;
                this.text = this.show == true ? '显示' : '隐藏';

            },
            changeDobb(num) {
                this.childrenInfo.num1 += num;
            }
        },
        //局部组件使用
        components: {
            myContent: {
                // props: ['title', 'content'],
                props: {//对数据进行校验
                    title: {
                        type: String,
                        default: '张大海',
                        required: true
                    },
                    content: {
                        type: String,
                        default: '十个大帅哥',
                        validator(val) {
                            return val.length > 5
                        }
                    },
                    num1: {
                        type: Number
                    }
                },
                data() {//用自己的数据
                    return {
                        // ownnum1: this.num1,
                    }
                },
                template: `<div>
                            <h4>{{title}}</h4>
                            <h4>{{content}}</h4>
                            <div>子组件num1：{{num1}}</div>
                            <button @click='handleClick'>点击</button>
                           </div>`,
                methods: {
                    handleClick() {
                        // this.ownnum1 += 10;
                        // this.$emit('change', this.ownnum1);//监听事件
                        this.$emit('change', 5);//监听事件
                    }
                }
            },
            changeBackgrount: {
                data() {//用自己的数据
                    return {
                        colorArr: ['red', 'orange', 'yellow', 'green'],
                        initColor: 'pink'
                    }
                },
                template: `<div>
                <button v-for="color in colorArr" style="margin-left: 8px;margin-bottom: 15px;" :key="color" :style="{backgroundColor:color}" class="btn" @click="setBC(color)">{{color}}</button>
                <div style="width: 300px;height: 100px;border: 1px solid #ccc" ref="xwzBox" :style="{backgroundColor:initColor}"></div>
                </div>`,
                methods: {
                    setBC(color) {
                        // console.log(color)
                        var div = this.$refs.xwzBox;
                        div.style.backgroundColor = color;
                    }
                }
            }
        }
    });
</script>